import { currentData } from "./currentdata";
import { project } from "./project";
import * as path from 'path'
import * as fs from 'fs';



type MapItem = { x: number, y: number, tile: number }

class MapPropertyContainer {

    id = 0;
    root: HTMLElement;
    root1: HTMLElement;

    tileSelector: HTMLSelectElement;
    mapSelector: HTMLSelectElement;

    constructor(private mapEditor: MapEditor) {


        const data = currentData.getCurrentData();
        const config = data.map[mapEditor.id];
        const TILE_SIZE = 64;
        const idArr = [];

        const filename = path.join(project.projectRoot + "/assets/config", "tile.json");
        const content = fs.readFileSync(filename, 'utf-8');
        const temp = JSON.parse(content);
        const tileData = temp.tile


        this.root = document.createElement("div");
        this.root.innerHTML = "地图编辑器";
        const iddiv = document.createElement("div");
        const id = document.createElement("span")
        id.innerText = "地图id";
        // const idInput = document.createElement("input")
        // idInput.disabled = true;
        // idInput.value = data.map[0].id;

        const mapId = document.createElement("select");

        for (let item of data.map) {
            const option = document.createElement("option");
            mapId.appendChild(option);
            const number = item.id - 1;
            option.value = number.toString();
            option.innerText = item.name;

        }

        const mapNamediv = document.createElement("div");
        // const mapNamespan = document.createElement("span");
        // const input = document.createElement("input");
        // mapNamespan.innerText = "地图名称";
        // input.value = data.map[this.id].name;


        const typediv = document.createElement("div")
        const selectName = document.createElement("span")
        selectName.innerText = "地图类型";

        const select = document.createElement("select");
        const arr = tileData;
        for (let item of arr) {
            const option = document.createElement("option");
            select.appendChild(option);
            option.value = option.innerText = item.id.toString();

        }
        // const arr = [{ id: 0, name: "河流" }, { id: 1, name: "草地" }];
        // for (let v of arr) {
        //     const option = document.createElement("option");
        //     select.appendChild(option);
        //     option.value = v.id.toString();
        //     option.innerText = v.name;
        // }


        // this.root.style.position="absolute";
        // this.root.style.left="10px";
        // this.root.style.top="10px"
        //this.root.setAttribute("style.offsetTop", "100px")
        // this.root.setAttribute("style.offsetLeft", "100px")

        ///// setPosition(this.root,100,10);???????????
        this.root.appendChild(iddiv);
        this.root.appendChild(id)
        // this.root.appendChild(idInput)

        this.root.appendChild(mapId)
        this.mapSelector = mapId;

        this.root.appendChild(mapNamediv)
        // this.root.appendChild(mapNamespan)
        // this.root.appendChild(input)
        this.root.appendChild(typediv)
        this.root.appendChild(selectName)



        this.root.appendChild(select)
        this.tileSelector = select;



        //alert("距顶:" + this.root.offsetTop + ",距左:" + this.root.offsetLeft);



    }

    setItem(item: MapItem) {
        this.tileSelector.value = item.tile.toString();
        this.tileSelector.onchange = () => {
            item.tile = parseInt(this.tileSelector.value);
            this.mapEditor.update();
        }
    }
    setMap() {
        this.mapSelector.value = this.mapEditor.id.toString();
        this.mapSelector.onchange = () => {
            this.mapEditor.id = parseInt(this.mapSelector.value);
            this.mapEditor.update();
            // const update = this.mapSelector.value;
            // this.mapSelector.value = update;

        }
    }
}
export class MapEditor {

    id = 0;
    constructor(private root: HTMLElement) {

    }

    update() {

        this.root.innerHTML = "";
        this.show();
    }


    show() {

        const data = currentData.getCurrentData();
        const config = data.map[this.id];
        const TILE_SIZE = 64;

        const filename = path.join(project.projectRoot + "/assets/config", "tile.json");
        const content = fs.readFileSync(filename, 'utf-8');
        const temp = JSON.parse(content);
        const tileData = temp.tile

        for (let item of config.setting) {

            const img = document.createElement("img");
            let imgUrl = ""
            let imgUrl1 = ""

            for (let item2 of tileData) {
                if (item.tile == item2.id) {
                    imgUrl1 = item2.picture;
                    imgUrl = path.join(project.projectRoot, imgUrl1);

                }

            }

            img.src = imgUrl;
            img.onclick = () => {
                mapPropertyContainer.setItem(item);

            }
            //  if(mapPropertyContainer){
            //      mapPropertyContainer.setMap();
            //  }

            this.root.appendChild(img)

            setPosition(img, TILE_SIZE * item.x + 20, TILE_SIZE * item.y + 100)
        }
        const mapPropertyContainer = new MapPropertyContainer(this);
        mapPropertyContainer.setMap();
        this.root.appendChild(mapPropertyContainer.root);
        setPosition(mapPropertyContainer.root, 400, 100)
    }

    hide() {
        this.root.innerHTML = "";
    }

}

function setPosition(node: HTMLElement, x: number, y: number) {

    const parent = node.parentElement;
    if (parent) {
        // const newX = x;
        // const newY = y; ??????
        const newX = parent.offsetLeft + x;
        const newY = parent.offsetTop + y;
        node.style.position = "absolute";
        node.style.left = newX + "px";
        node.style.top = newY + "px";
    }

}
